<template>
    <div class="shangpin">
   <div class="inputbox">
    <p>饿了么</p>
      <input type="text" placeholder="输入商家，商品名称">
   </div>
      <div class="banner"></div>
      <div class="btns">
    <div class="top">
      <p>猜你喜欢</p>
    </div>
    <div class="center">
      <div>综合排序</div>
    <div @click="sheng">距离最近</div>
    <div @click="xiaoliang">销量最高</div>
    <div>筛选</div>
    </div>
    <div class="bottom"  >
      <div @click="toDetail(item.mtWmPoiId)" v-for="(item,index) in list" v-bind:key="index">
        <img :src="item.picUrl" alt="">
        <h5>{{item.name}}</h5>
   
        <p>{{item.distance}}</p>
        <p>{{item.monthSalesTip}}</p>
      </div>
    </div>
    </div>
  
    </div>
    
  </template>
  
  <script>
   import {dp_list} from '../api/api'
  export default {
    name: 'shangpin',
    data(){
      return{
        btnsIndex:0,
        list:[ ],
        btnsIndex:0,
       
      }
      },
      methods:{
     sheng(){
      this.list.sort((a, b) => {
        return parseFloat(a.distance) - parseFloat(b.distance);
      });
     },
     xiaoliang(){
      this.list.sort((a, b) => {
        console.log(parseInt(a.monthSalesTip.substring(2)));
        
        return parseInt(b.monthSalesTip.substring(2)) - parseInt(a.monthSalesTip.substring(2));
      });
     },
     toDetail(id){
      this.$router.push('/detail/'+id)
     }
      }, mounted(){

dp_list({params:{}}).then((res)=>{
  console.log(res.data.list);
  this.list=res.data.list
  console.log(this.list);
  
})
},
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  
  .inputbox{
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #00BBFF, #0095FF);;
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 0 20px;
    box-sizing: border-box;
    padding: 10px 20px;
  
  }
  .inputbox p{
    margin-bottom: 20px;
    font-family: '楷体';
  }
  input{
    border-radius: 15px;
    width: 100%;
    height: 28px;
    text-align: center;
    border: 0;
  }
  .banner{
    margin: 10px;
    height:140px;
    background: url('https://img1.baidu.com/it/u=3904468171,2149324645&fm=253&fmt=auto&app=138&f=PNG?w=400&h=203');
    background-size:100% 100%;
    box-sizing: border-box;
  }
  
.top{
margin: 10px 15px;
}
.center{
  display: flex;
  justify-content: space-around;
  font-size: 14px ;
  font-weight: bold;
  margin-bottom: 10px;
}

.bottom{
  height: 315px;
 overflow: auto;
}
.bottom div{
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px;
  background: white;
}
.bottom h5{
  height: 50px;
  width: 100px;
  margin-right: 20px;
}
.bottom p{
  font-size: 14px;
}
.top p{
  font-weight: bold;
}
.bottom img{
  width: 80px;
  height: 80px;
}
  </style>
  